<template>
  <div>
    <div>
      <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="tzback()"
      />
    </div>
    <!--  1.订单信息-->
    <div>
      <!--    订单信息-->
      <van-cell>
        <template #title>
          <span class="custom-title">订单金额：{{order.tprice}}</span>
        </template>
        <template #value>
          <span class="custom-title">实付金额：{{ order.pprice }}</span>
        </template>
        <template #label>
          <span>{{order.ctime}}</span>
        </template>
      </van-cell>
      <!--    订单的收货地址-->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">{{order.address.name}}</span>
          <van-tag style="margin-left: 1rem" type="danger">{{order.flag}}</van-tag>
        </template>
        <template #value>
          <span class="custom-title">{{ order.address.phone }}</span>
        </template>
        <template #label>
          <span class="custom-title">{{order.address.detail}}</span>
        </template>
      </van-cell>
      <!-- 2.订单详细-->
      <van-card
          v-for="g in order.items"
          :num="g.num"
          :price="g.price"
          :desc="g.detail"
          :title="g.title"
          :thumb="g.imgurl"
      />
    </div>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="addOrder()" />
  </div>
</template>

<script>
export default {
  name: "TicketOrderPrefix",
  data(){
    return{
      order: {
        id:1,
        tprice:88,
        pprice:66,
        ctime:"2022-04-21 12:12:11",
        flag:1,
        address:{
          name:"李逍遥",
          phone:"15036432779",
          detail:"河南省二七区航海路台胞小区南区"
        },
        items:[
          {
            id:1,
            oid:1,
            gid:1,
            imgurl:"https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
            title:"商品标题",
            num:1,
            price:22,
            detail:""
          }
        ]
      }
    }
  },mounted() {
    //请求接口 加载数据 axios

  },methods:{
    tzback(){
      history.back();
    },
    addOrder(){
      //请求后端接口，实现订单创建
      //成功之后 跳转到支付页面
    }
  }
}
</script>

<style scoped>
.van-cell__title{
  width: 80%;
}
</style>
